<template>
  <div>
    {{ fullName }}
    <button @click="clicks">点击</button>
    <input type="text" v-model="fullName">
  </div>
</template>
<script>
export default {
  //   template: "<p>{{firstName +' '+ lastName}}asd</p>",
  //   data() {
  //     return {
  //       firstName: "lucas",
  //       lastName: "Root",
  //     };
  //   },

    data() {
      return {
        firstName: "luccas",
        lastName: "Root",
      };
    },
  //   computed: {
  //     fullName() {
  //       return `${this.firstName} ${this.lastName}`;
  //     },
  //   },

  computed: {
    fullName: {
      /*若使用方法写法fullName()会报错,需使用属性写法*/
      get() {
          console.log('调用了getter方法');
        //回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
        // return `${this.firstName} ${this.lastName}`;
        return `${this.firstName}`;
      },
      set(val) {
        // 监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据,val就是fullName的最新属性值
        
        console.log('调用了setter方法');
        this.firstName = val;
        // this.lastName = names[1];
      },
    },
  },
  
  methods: {
      clicks(){
          this.firstName = 'to mcat'
      }
  },
};
</script>